<template>
  <div>
    <el-container>
      <el-header> Vue 答题 </el-header>
      <el-container>
        <el-aside width="200px">
          <h2>历史排行榜</h2>
          <ol>
            <li v-for="(item, index) in info" :key="index">
              第 {{ index + 1 }} 名答对了{{ item }}道题
            </li>
          </ol>
        </el-aside>
        <el-main>
          <el-button type="primary" @click="btnRouter" v-show="this.$router.currentRoute.path === '/'"
            >点击按钮前往答题页面</el-button
          >
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      info: [],
    };
  },
  methods: {
    btnRouter() {
      this.$router.push({ path: "/index" });
    },
  },
  created() {
    this.info = window.localStorage.getItem("scoreList").split(",");
    this.info = this.info.sort((x, y) => y - x);
    console.log(this.$router.currentRoute.path);
  },
  watch: {
    info: {
      handler() {
        if (this.info.length > 10) {
          this.info.splice(10);
        }
        localStorage.scores = this.scores;
      },
    },
    mounted() {
      this.info = this.info.sort((x, y) => y - x);
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
</style>
